<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../assets/commonAssets/boostrap/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/museum.css" />
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/changemuseum.css" />
		<script src="../assets/commonAssets/jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".uploadimg").change(function() {
					var imgnum = $(this).attr("data");
					var file = $(this).val();
					var fileSize = $(this)[0].files[0].size;

					if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)) {
						alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
					} else {
						if (fileSize > 1024 * 300) {
							alert("请上传小于300K的图片");
						} else {
							$("." + imgnum).attr("src", URL.createObjectURL($(this)[0].files[0]));
						}
					}
				});
			});
		</script>
		<title>博物馆简介编辑</title>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="Top"><i>博物馆简介编辑</i></div>
			</div>
			<div class="row col-xs-9" style="margin-top: 2%;">
				<form class="form-horizontal" method="post" action="updataMuseum" enctype="multipart/form-data">
					<input type="hidden" name="mID" th:value="${session.user.mID}">
					<div class="form-group" style=" margin-bottom: 40px;">
						<label class="col-xs-2 control-label">博物馆图片：</label>
						<div class="col-xs-3 Pic">
							<input type="file" data="img0" class="uploadimg" name="museumImage">
							<img src="assets/manage/image/FileUpload.jpg" class="img0" th:src="${museumBean.getMimage()}">
							<input type="hidden" name="mimage" th:value="${museumBean.getMimage()}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-2 control-label">博物馆名称：</label>
						<div class="col-xs-3" style="width: 300px;height: 40px;margin-top: 6px;">
							<span th:text="${museumBean.getMname()}" style="width: 300px"></span>
							<input type="hidden" th:value="${museumBean.getMname()}" name="mname">
						</div>
					</div>
					<div class="form-group" style=" margin-bottom: 40px;">
						<label class="col-xs-2 control-label">博物馆简介：</label>
						<div class="col-xs-3">
							<textarea placeholder="博物馆简介（限125字）" name="mintro" maxlength="125" style="width: 450px; min-height: 150px; padding: 10px;" th:text="${museumBean.getMintro()}"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-2 control-label">博物馆详情：</label>
						<div class="col-sm-8">
							<div id="div1" class="toolbar">
							</div>
							<div style="padding: 1px 0; color: #ccc"></div>
							<div id="div2" class="text" th:utext="${museumBean.getMdetailed()}">
								<p>请输入内容</p>
							</div>
							<input type="hidden" name="mdetailed" class="context" th:value="${museumBean.getMdetailed()}">
						</div>
					</div>
					<div class="row" id="bottombtn">
						<div class="col-xs-4 col-xs-offset-3">
							<button type="submit" id="btn1" style="width: 100%; margin: 0px">保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../assets/manageAssets/js/wangEditor.js"></script>
	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器
		var editorText = "";
		//设置本地上传
		editor.customConfig.uploadImgShowBase64 = true
		//限制上传图片大小200K
		editor.customConfig.uploadImgMaxSize = 100 * 1024
		//限制上传图片最多为3张
		editor.customConfig.uploadImgMaxLength = 3
		// 或者 var editor = new E( document.getElementById('editor') )
		editor.create()
		document.getElementById('btn1').addEventListener('click', function () {
			// 读取 html
			editorText = editor.txt.html()
		}, false)
		$(function(){
			$('#btn1').on("click",function(){
				$(".context").attr("value",editorText);
				var v = $(".context").attr("value");
				// alert(v);
			});
		});
	</script>
</html>
